<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>新冠病毒确诊统计</title>
    <script th:src="@{../js/echarts.min.js}"></script>
    <link rel="stylesheet" th:href="@{../css/layui.css}">
    <script type="text/javascript" th:src="@{../js/jquery-1.7.2.min.js}"></script>
    <script type="text/javascript" th:src="@{../js/layui.js}"></script>
    <script th:src="@{../js/echarts.js}"></script>
</head>
<style>
    a:active {
        color:#D200D2;
        background-color: red;
        text-decoration:none;
    }
    li.active a {
        color:red;
    }
</style>

<div th:replace="~{commons/side::sidebar}"></div>

<div class="layui-body">

    <body style="height: 100%; margin: 0">
        <div id="main" style="height: 110%"></div>
       <script type="text/javascript">
           $(document).ready(function() {
               //基于准备好的dom，初始化echarts图表
               var myChart=echarts.init(document.getElementById('main'));
               //数据加载完之前先显示一段简单的loading动画
               myChart.showLoading();
               var names=[];//横坐标
               var values=[];//纵坐标
               $.ajax({
                   type : "GET",
                   async : true,//异步请求
                   url : "http://localhost:8080/Data/data",
                   dataType : "json",//返回数据为json
                   success : function (result) {
                       console.log(result)
                       console.log(result[0].state)
                        //请求成功时执行，result即为服务器返回的json对象
                       // console.log(result[1].get(0));
                       if(result){
                           for(var i=0;i<result.length;i++){
                               names.push(result[i].state);
                               values.push(result[i].latestTotalCases);
                           }
                           myChart.hideLoading();//隐藏加载动画
                           myChart.setOption({   //加载数据图表
                               title: {
                                   text: '中国疫情统计图表'
                               },
                               tooltip: {},
                               legend: {
                                   data:['确诊量']
                               },
                               grid : {
                                   y2:140
                               },
                               xAxis: {
                                   type: 'category',
                                   data : names,
                                   axisLabel : {
                                       interval :0,
                                       rotate : -30,
                                   }
                               },
                               yAxis: {
                                   type : 'value'
                               },
                               series: [{
                                   name : '确诊量',
                                   type : 'bar',
                                   data : values
                               }]
                           });
                       }
                   },
                   error : function (errorMsg) {
                        //请求失败时执行该函数
                       alert("图表请求数据失败!");
                       myChart.hideLoading();
                   }
               });
           });

          </script>
   </body>
</div>
<div style="padding: 15px;"></div>
</html>